import React, { useState } from 'react'
import { Link, NavLink, Outlet, useNavigate, Navigate } from 'react-router-dom'
export default function Message() {
  const [messages] = useState([
    { id: '001', title: '消息1', content: '內容1' },
    { id: '002', title: '消息2', content: '內容2' },
    { id: '003', title: '消息3', content: '內容3' },
    { id: '004', title: '消息4', content: '內容4' },
  ])
  const navigate = useNavigate()
  function showOne(item) {
    console.log('点击后扣666', messages)
    navigate('one', {
      replace: false,
      state: {
        id: item.id,
        title: item.title,
        content: item.content,
      },
    })
  }
  return (
    <div>
      <h4>Message</h4>
      <ul>
        {messages.map((item) => {
          return (
            <li key={item.id}>
              {/* <NavLink to={`one?id=${item.id}&title=${item.title}&content=${item.content}`} >
                {item.title}
              </NavLink> */}
              <NavLink
                to="one"
                state={{
                  id: item.id,
                  title: item.title,
                  content: item.content,
                }}
              >
                {item.title}
              </NavLink>
              <button onClick={() => showOne(item)}>查看详情</button>
            </li>
          )
        })}
        {/* <li>
            <NavLink className="list-group-item" to="One">
              One
            </NavLink>
          </li> */}
      </ul>
      <Outlet />
    </div>
  )
}
